<template>
  <Form class="search">
    <Row>
      <Col span="5">
        <FormItem label="店铺分类">
          <ShopSelect v-model="searchForm.ownerCategoryId" @input="onSearchData"></ShopSelect>
        </FormItem>
      </Col>
      <Col span="4">
        <FormItem label="商品品牌">
          <Select v-model="searchForm.brandId" filterable clearable @on-change="onSearchData" placeholder="请选择品牌">
            <Option 
              v-for="item in brandList"
              :key="item.value"
              :label="item.text"
              :value="item.value.toString()">
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col span="5">
        <FormItem label="商品名称">
          <Input v-model="searchForm.keyword" :maxlength="120" @on-enter="onSearchData" placeholder="请输入商品名称"/>
        </FormItem>
      </Col>
      <Col span="4">
        <FormItem label="商品编码" v-show="isShow=='tab1'">
          <Input v-model="searchForm.code" :maxlength="120" @on-enter="onSearchData" placeholder="请输入商品编码"/>
        </FormItem>
      </Col>
      <Col span="4">
        <FormItem label="sku编码" v-show="isShow=='tab1'">
          <Input v-model="searchForm.skuCode" :maxlength="120" @on-enter="onSearchData"  placeholder="请输入sku编码"/>
        </FormItem>
      </Col>
      <Col span="2" class-name="search small">
        <Button :class="{'btn-search': true, large: isLarge&& isLargeShow=='tab1'}" type="primary" icon="ios-search" @click="onSearchData"></Button>
      </Col>
    </Row>
    <Row v-if="isLarge && isLargeShow === 'tab1'">
      <Col span="5">
        <FormItem label="直径">
          <SelectDiameter v-model="searchForm.tireRim" @input="onSearchData"></SelectDiameter>
        </FormItem>
      </Col>
      <Col span="4">
        <FormItem label="花纹">
          <SelectFigure v-model="searchForm.tireFigure" @input="onSearchData"></SelectFigure>
        </FormItem>
      </Col>
      <Col span="5">
        <FormItem label="规格">
          <Input v-model="searchForm.specs" :maxlength="120" @on-enter="onSearchData"  placeholder="请输入规格"/>
        </FormItem>
      </Col>
    </Row>
  </Form>
</template>
<script>
import { mapGetters } from 'vuex'
import ShopSelect from '@/components/ShopSelect'
import { clearEmpty } from '@/util'
import BrandSelect from '@/components/BrandSelect'
import SelectFigure from '@/components/SelectFigure'
import SelectDiameter from '@/components/SelectDiameter'
export default {
  props: {
    isLarge: {
      type: Boolean,
      default: ()=> false
    }
  },
  components: {
    ShopSelect,
    BrandSelect,
    SelectFigure,
    SelectDiameter
  },
  data() {
    return {
      searchForm: {
        brandId: null,
        ownerCategoryId: null,
        keyword: "",
        code: "",
        skuCode: "",
        tireFigure: null,
        tireRim: null,
        specs: ''
      },
      isShow: 'tab1',
      isLargeShow: 'tab1'
    };
  },
  mounted() {
    this.$store.dispatch('getBrandList', true)
  },
  methods: {
    onSearchData(id) {
      let param = {
        brandId: this.searchForm.brandId,
        ownerCategoryId: this.searchForm.ownerCategoryId || '',
        keyword: this.searchForm.keyword,
        code: this.searchForm.code,
        skuCode: this.searchForm.skuCode,
        size: window.$pageSize,
        current: 1,
        tireFigure: this.searchForm.tireFigure,
        tireRim: this.searchForm.tireRim,
        specs: this.searchForm.specs

      }
      // 满额返券的情况
      if (this.isLarge) {
        param.rede = ''
      }
      param = clearEmpty(param)
      this.$emit("onSearchData", param)
    }
  },
  computed: {
    ...mapGetters(['brandList'])
  },
  watch: {
    isLarge(val) {
      this.isLarge = val
    }
  }
};
</script>

